<template>
  <div class="app-container">
    <div class="app-content">
      <Header />
      <DateTime />
      <SearchBox />
      <AppGroupNav />
      <Yiyan v-if="yiyan" />
    </div>
    <Pinned />
    <SideBar />
    <Login />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import Header from '@/components/Header.vue';
import DateTime from '@/components/DateTime.vue';
import SearchBox from '@/components/SearchBox.vue';
import AppGroupNav from '@/components/AppGroupNav.vue';
import Yiyan from '@/components/Yiyan.vue';
import Pinned from '@/components/Pinned.vue';
import SideBar from '@/components/SideBar.vue';
import Login from '@/components/Login.vue';
import { useStore } from 'vuex';

const store = useStore();
const yiyan = computed(() => store.state.setContent.yiyan);
</script>

<style scoped lang="less">
.app-container {
  height: 100%;
  width: 100%;
}
.app-content {
  height: 100%;
  display: flex;
  flex-flow: column;
}
</style>    